<template>
  <div>
    <div class="dashboard-container">
      <el-descriptions class="margin-top" title="个人信息" :column="1" border>
<!--        <template slot="extra">-->
<!--          <el-button type="primary" size="small">操作</el-button>-->
<!--        </template>-->
        <el-descriptions-item label-class-name="fix">
          <template slot="label"><i class="el-icon-user"></i>用户名</template>{{ name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <svg-icon icon-class="dept" />
            所属部门
          </template>
          {{userInfo.currentUserDeptName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{userInfo.user.telephone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <svg-icon icon-class="email" />
            邮箱
          </template>
          {{userInfo.user.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <svg-icon icon-class="role" />
            拥有的角色
          </template>
          {{userInfo.currentUserRoleName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <svg-icon icon-class="acl" />
            拥有的权限
          </template>
          {{userInfo.currentUserAclListName}}
        </el-descriptions-item>
      </el-descriptions>
    </div>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import {getCurrentUserInfo} from '@/api/user'

export default {
  name: 'Dashboard',
  data(){
    return{
      userInfo: {}
    }
  },
  created() {
    getCurrentUserInfo().then(res =>{
      this.userInfo = res.data;
    })
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-descriptions-item__cell .el-descriptions-item__label .is-bordered-label {
  width: 500px;
}
</style>
<style>
.fix{
  width: 115px;
}
</style>
